<template>
	<view>
		<view class="bj">
			<u-navbar title="就近加油" :autoBack="true" bgColor="#3284fc"
				titleStyle="font-size:18px; color:white;height:44px;line-height:44px" leftIconColor="#fff">
			</u-navbar>
			<u-cell-group :border="false"
				:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'50px auto',width:'350px'}">
				<view v-if="petrol != null">
					<image :src="petrol.petrolImage.photo"></image>
				</view>
				<view class="refuel">
					<view class="js">
						<view style="font-weight: 600;font-size: 14px; color: black;">
							<span v-if="petrol != null">
								{{petrol.name}}
							</span>
						</view>
						<view style="margin: 2px 0;">
							<span v-if="petrol != null">
								营业时间：{{petrol.week}} {{petrol.startTime}}-{{petrol.endTime}}
							</span>
						</view>

						<navigator open-type="navigate" url="/pages/refuel/reful_near_dt/reful_near_dt">
							<span v-if="petrol != null">
								<u-icon :label="petrol.address" size="15" labelPos="left"
									name="/static/images/plane@2x.png" labelSize="12px" space="25px"></u-icon>
							</span>
						</navigator>
					</view>
					<u-icon name="phone" color="#ffffff" size="50" class="im"></u-icon>
				</view>
			</u-cell-group>
			<u-cell-group :border="false"
				:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'50px auto',width:'350px'}">
				<view style="font-size: 18px; font-weight: 600; margin:20px 20px">油价详情</view>
				<view v-if="petrol != null">
					<view class="yj" v-for="(item,index) in petrol.chePetrolOil">
						<view v-if="item.oilId==0">92#</view>
						<view v-if="item.oilId==1">95#</view>
						<view v-if="item.oilId==2">98#</view>
						<view v-if="item.oilId==3">0#</view>
						<view style="color: orange;">￥{{item.price}}/L</view>
					</view>
				</view>
			</u-cell-group>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				petrol: null
			}
		},
		onLoad(e) {
			// console.log(e.id)
			this.id = e.id
			this.getPetrol()
		},
		methods: {
			getPetrol() {
				let that = this;
				this.$http({
					url: '/api/shop/petrol/' + that.id,
					mtehod: 'GET',
					success(res) {
						// console.log(res)
						that.petrol = res.data.data
					}
				})
			}
		}
	}
</script>

<style scoped>
	.yj {
		display: flex;
		justify-content: space-around;
		border-bottom: 2px solid #f7f7f7;
		padding: 5px 0;

	}

	.u-cell-group {
		padding-bottom: 20px;
	}

	.im {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #166ce9;
		margin-right: 20px;
	}

	.js {
		font-size: 12px;
		color: #6c6c6c;
		margin-left: 20px;
		text-align: left;
	}

	.refuel image {
		width: 100px;
		height: 66px;

		border-radius: 10px;
	}

	.refuel {
		/* margin: 10px 20px; */
		display: flex;
		justify-content: space-between;
	}

	.u-cell-group image {
		height: 180px;
		width: 310px;
		margin: 20px 20px;
		border-radius: 10px;
	}

	.bj {
		width: 100%;
		height: 220px;
		background-color: #3384fc;
	}
</style>